<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">智慧党建</span>
        <span class="banner-main__subtitle" style="line-height: 28px">
          为企业、各级政府等提供党建解决方案，推进党建工作科学化开展，<br />
          积极推进“互联网＋党建”要求，实现“党建管理智能化”
        </span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案描述</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            智慧党建（Smart Party Building，SPB）是基于 SaaS 模式搭建的党建工作的信息化平台工具。全面、精准、高效地为企业、各级政府等提供党建资讯发布阅览、在线会议、党政培训、党费缴纳等功能与服务，推进党建工作科学化开展，是“互联网+”与基础党建工作的有效融合。
          </span>
          <div align="center"><img src="@/assets/flow1.png" width="670px" /></div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
        <div align="center">
          <span style="color:white">
          融合IAAS层基础、PAAS层能力、SAAS层应用，全心全意为“伟大工程”赋能。<br />
          </span>
        </div>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/zhdj2.png" width="100%" />
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">五平台一中心</h1>
        <div class="size-box__column"></div>
        <div class="card" align="center">
          <span class="description">
            党建宣传一体化、党员教育系统化、党建工作可视化、综合决策科学化<br />  
          </span>
          <div align="center"><img src="@/assets/zhdj3.jpg" width="100%" /></div><br />         
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">应用场景</h1>
        <h6 class="model-desc">Application scenarios</h6>
        <div class="card">
          <el-tabs v-model="activeName" @tab-click="handleClick" >
            <el-tab-pane label="面向党员" name="first">
              <div align="center"><img src="@/assets/zhdjyy1.jpg" width="860px" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="面向党委" name="second">
              <div align="center"><img src="@/assets/zhdjyy2.jpg" width="860px" /></div><br />
            </el-tab-pane>
            <el-tab-pane label="面向党组织" name="third">
              <div align="center"><img src="@/assets/zhdjyy3.jpg" width="860px" /></div><br />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'first',
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '操作更便捷：以小程序为载体，配合人性化的界面设计，可降低用户使用门槛，让产品体验更直观、简单易用。' },
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '多终端接入：支持企业工作台、小程序、大屏、PC 端、门户等多端接入，更多场景使用、管理党建工作，使党建更加轻松便利。' },
        ],
        [
          { icon: require('@/assets/icon_05.png'), title: '部署模式灵活：SaaS 版、小程序独立主体版、企业微信集成版等多种模式选择，支持部分功能定制/叠加，灵活地满足个性化场景的需求。' },
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '数据可视化：党员、组织等发展情况一屏看穿、一屏看全。民主评议、投票调查、考试排行、日常签到等功能提供数据统计，解决缺乏有效数据支撑辅助科学决策痛点。' },
        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '业务全覆盖：包含三会一课、党建考核、网络课程、党费缴纳等多项功能，解决党建工作数据庞杂、党员数量多且分散，管理成本高等痛点。' },
        ],
        [
          { icon: require('@/assets/icon_08.png'), title: '信息传达快：资讯公告、奖罚公示、会议通知、党务知识等功能，解决信息传达效率低，落实情况难以追踪痛点。' },
        ],
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/zhdj1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
